<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi, propApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import xmImage from '@/components/xmImage/index.vue';
  import boxinfoForm from './boxinfoForm.vue';
  const dataForm = ref(),
  boxinfoFormRef = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    pool_list:[] as Array<poolQuery>,
    p_pool_list:[] as Array<poolQuery>,
    pool_id:0,
    gift_id:0,
    pool_config_id:0,
    gift_type:0,
    sp_id:0,
  })
  /**
   * pool_id 礼物池id
   *
   * pool_config_id 礼物池配置id
   *
   * child_gift_id 添加的礼物id
   *
   * gift_num 参与次数
   */
  interface poolQuery {
    pool_id:number
    pool_config_id:number
    child_gift_id:number
    gift_type:number
    gift_name:string
    price:number
    image:string
    gift_num:number
  }

  const handleInfoForm = (row:any = {})=>{
    boxinfoFormRef.value.openDialog({
      pool_id:action.pool_id,
      p_gift_id:action.gift_id,
      pool_config_id:action.pool_config_id,
      p_pool_list:action.p_pool_list,
      pool_list:action.pool_list,
      ...row
    })
  }
  const handleDelete = (row:any = {})=>{
    const { sp_id=0, gift_name='' } = row
    if(!sp_id) return ToastWarning('缺少id')
    ElMessageBox.confirm(`确认删除礼物：${gift_name}吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const loading = Toastloading();
      gamesApi.wishLuckPoolConfigChildDel({sp_id}).then(()=>{
        ToastSuccess("删除成功!");
        loading.close();
        getPoolList()
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const getPoolList = async()=>{
    const loading = Toastloading()
    const res = await gamesApi.wishLuckPoolConfigChildList({
      pool_id:action.pool_id,
      gift_id:action.gift_id,
      pool_config_id:action.pool_config_id
    })
    loading.close()
    const { data=[] } = res
    action.pool_list = data
  }
  const openDialog = async(query:any={})=> {
    const { id, pool_id, gift_id, gift_name, gift_type, pool_list } = query
    action.pool_id = pool_id
    action.gift_id = gift_id
    action.gift_type = gift_type
    action.pool_config_id = id
    action.title = `礼物配置：${gift_name}`
    action.p_pool_list = pool_list.filter((res:any)=> [12,13].indexOf(res.gift_type) == -1)
    await getPoolList()
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :close-on-press-escape="action.disabled"
      width="70%"
      :title="action.title">
      <el-button class="xm-mrAuto xm-mb10" type="primary" @click="handleInfoForm({})">新增</el-button>

      <el-table
        class="xm-TableCenter"
        :data="action.pool_list"
        height="500"
        border
      >
        <el-table-column width="150" prop="child_gift_id" label="礼物ID" />
        <el-table-column min-width="100" prop="gift_name" label="礼物名称" />
        <el-table-column width="100" prop="price" label="礼物价格" />
        <el-table-column min-width="120" label="礼物图片">
          <template #default="scoped">
            <xmImage style="height: 50px;" :src="scoped.row.image" :list="[scoped.row.image]" />
          </template>
        </el-table-column>
        <el-table-column width="150" prop="gift_num" label="礼物数量" />
        <el-table-column width="220" label="操作">
          <template #default="scoped">
          <el-button type="primary" @click="handleInfoForm(scoped.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scoped.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-button @click="handleAdd" class="xm-mt10 xm-mAuto" type="primary" :icon="'Plus'" circle /> -->
    </el-dialog>
    <boxinfoForm ref="boxinfoFormRef" @update-list="getPoolList" />
  </div>
</template>
